<template>
  <div>
    <div>全部学生考试记录</div>
    <div>
      <el-table :data="record" stripe border style="width: 100%">
        <el-table-column prop="sid" label="学号" align="center" style="width:25%"></el-table-column>
        <!--        <el-table-column prop="name" label="姓名" align="center" style="width:25%"></el-table-column>-->
        <el-table-column prop="test_result" label="考试结果" align="center" style="width:35%"></el-table-column>
        <el-table-column prop="test_time" label="考试时间" align="center" style="width:40%"></el-table-column>
        <el-table-column label="选项" align="center" style="width:40%">
          <template #default="scope">
            <el-button type="warning" @click="editRecord(scope.row)">编辑</el-button>
            <el-divider direction="vertical" />
            <el-button type="success" @click="showanswer(scope.row)">查看选项答案</el-button>
            <el-divider direction="vertical" />
            <el-button type="danger" @click="deleteRecord(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>

<!--      查看答案的dialog-->
      <el-dialog v-model="this.dialoganswer" @close="this.dialoganswer = false;clear()" style="width: 100%; height: 100%">
        <el-table :data="showstuanswer" stripe border style="width: 100%">
          <el-table-column prop="numid" lable="题号" align="center"></el-table-column>
<!--          <el-table-column prop=num lable="测试" align="center"> </el-table-column>-->
<!--          <el-table-column prop="test_time" lable="测试时间" align="center"> </el-table-column>-->
          <el-table-column prop="answerslist" lable="选项答案" align="center"></el-table-column>
        </el-table>

      </el-dialog>

      <!--      编辑的dialog-->
      <el-dialog v-model="this.dialogVisible" @close="this.dialogVisible = false;" style="width: 80%; height: 80%">
        <el-form :model="this.editForm" :rules="rules" ref="editForm">
          <el-form-item prop="s_id" label="s_id">
            <el-input placeholder="请输入id" v-model="this.editForm.sid"></el-input>
          </el-form-item>
          <!--          <el-form-item prop="name" label="sname">-->
          <!--            <el-input placeholder="请输入name" v-model="this.editForm.name"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item prop="test_result" label="test_result">
            <el-input placeholder="请输入test_result" v-model="this.editForm.test_result"></el-input>
          </el-form-item>
          <el-form-item prop="test_time" label="test_time">
            <el-input placeholder="请输入test_time" v-model="this.editForm.test_time" disabled="true"></el-input>
          </el-form-item>


        </el-form>
        <el-button-group>
          <el-button type="primary" size="mini" @click="editRecordSubmit('editForm')">提交</el-button>
          <el-button type="info" size="mini" @click="this.dialogVisible = false;resetForm('editForm')">取消</el-button>
        </el-button-group>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {forEach} from "core-js/stable/dom-collections";

export default {
  name: "path1",

  // inject:['reload'],
  // return{refresh};



  data() {
    return {
      record: [],
      dialogVisible : false,
      dialoganswer:false,

      showstuanswer:[{
          numid:'',
      //   answerlist: '',
          answerslist:'',
      }],

      // const showstuanswerlist = ref([{
      //
      // }]),

      editForm : {
        sid : '',
        // sname : '',
        test_time : '',
        test_result : '',
        // answerlist:[],
      },
      rules : {
        sid : [
          {required: true, message: '请输入学号', trigger: 'blur'}
        ],
        // sname : [
        //   {required: true, message: '请输入name', trigger: 'blur'}
        // ],
        test_time : [
          {required: true, message: '请输入测试时间', trigger: 'blur'}
        ],
        test_result : [
          {required: true, message: '请输入测试结果', trigger: 'blur'}
        ],
      }
    }
  },
  created() {
    this.initRecord();
  },
  methods: {


    initRecord() {
      this.$axios.post("api/showResult").then(res => {
        console.log("考试记录 = ", res.data);
        this.record = res.data.data;
      })
    },
    editRecord(row) {
      this.dialogVisible = true;
      this.editForm.sid = row.sid
      // this.editForm.name = row.sname
      this.editForm.test_time = row.test_time
      this.editForm.test_result = row.test_result

    },

    showanswer(row){

      // this.answerlist = row.answerlist.split(',')
      // console.log("测一下这个",row.answerlist[0])
      // this.showstuanswer[0].answerlist = row.answerlist[0]
      // if(this.showstuanswer[0]){
      //   this.showstuanswer.pop()
      // }

      for(let i=0;i < row.answerlist.length;i ++){
        // this.showstuanswer[i].answerlist = row.answerlist[i]
        this.showstuanswer.push({numid:i + 1, answerslist: row.answerlist[i]})
      }
      // this.answerlist = Array.from(row.answerlist)
      // this.answerlist.answer = row.answerlist.split('')
      console.log("测一下这个",this.showstuanswer[0].answerslist)
      console.log("测一下这个",row.answerlist)

      this.dialoganswer = true;
    },

    clear(){
      this.showstuanswer = [{
        answerslist: '',
      }]
    },


    editRecordSubmit(row) {

      let data = {
        sid :this.editForm.sid,
        test_time:this.editForm.test_time,
        test_result:this.editForm.test_result
      };
      this.$axios.post(`api/EditResult`,data).then((res) =>{
        if(res.data.msg === "更新成功"){
          this.initRecord()
        }
        else{

        }
      })

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    deleteRecord(row) {
      let data = {
        test_time:row.test_time
      }

      this.$axios.post(`api/DelResult`,data).then(res => {
        if(res.data === "删除成功"){
          this.initRecord()
        }
        else{

        }
      })

    }



  },


}
</script>

<style scoped>

</style>